<template>
	<view class="message-container">
		<view class="message-list">
			<view
				v-for="(item, idx) in messages"
				:key="idx"
				class="message-card"
				@tap="openDetail(item)"
			>
				<view class="msg-icon">
					<image :src="item.icon" class="icon-img"/>
					<view v-if="item.unread" class="red-dot"></view>
				</view>
				<view class="msg-content">
					<view class="msg-title">{{ item.title }}</view>
					<view class="msg-brief">{{ item.brief }}</view>
				</view>
				<view class="msg-right">
					<view class="msg-time">{{ item.time }}</view>
					<uni-icons type="right" size="20" color="#bbb"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messages: [
					{
						title: '系统通知',
						brief: '您的门禁申请已通过，请及时查收。',
						time: '10:23',
						unread: true,
						icon: '/static/message-system.png'
					},
					{
						title: '物业公告',
						brief: '本周六将进行小区电梯维护，请注意安全。',
						time: '昨天',
						unread: false,
						icon: '/static/message-notice.png'
					},
					{
						title: '申请反馈',
						brief: '您提交的报修已受理，维修师傅将尽快上门。',
						time: '06-12',
						unread: true,
						icon: '/static/message-apply.png'
					}
				]
			}
		},
		methods: {
			openDetail(item) {
				if (item.title === '物业公告') {
					uni.navigateTo({
						url: '/pages/prop-notice/prop-notice'
					});
				} else if (item.title === '系统通知') {
					uni.navigateTo({
						url: '/pages/sys-notice/sys-notice'
					});
				} else if (item.title === '申请反馈') {
					uni.navigateTo({
						url: '/pages/apply-feedback/apply-feedback'
					});
				}
			}
		}
	}
</script>

<style>
	.message-container {
		min-height: 100vh;
		background: #f6f8fa;
		padding-bottom: 60rpx;
	}
	.message-list {
		margin: 24rpx;
	}
	.message-card {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.08);
		padding: 24rpx 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}
	.msg-icon {
		position: relative;
		margin-right: 20rpx;
	}
	.icon-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 16rpx;
		background: #f0f4fa;
	}
	.red-dot {
		position: absolute;
		top: 0;
		right: 0;
		width: 16rpx;
		height: 16rpx;
		background: #e64340;
		border-radius: 50%;
		border: 2rpx solid #fff;
	}
	.msg-content {
		flex: 1;
		min-width: 0;
	}
	.msg-title {
		font-size: 28rpx;
		color: #222;
		font-weight: bold;
		margin-bottom: 6rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.msg-brief {
		font-size: 24rpx;
		color: #888;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.msg-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		height: 60rpx;
		margin-left: 16rpx;
	}
	.msg-time {
		font-size: 20rpx;
		color: #bbb;
		margin-bottom: 8rpx;
	}
	.icon-arrow-right {
		font-size: 28rpx;
		color: #bbb;
	}
</style>
